<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑商品信息</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
    <style>
        .form-group {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<form class="form-horizontal" id="editGoodsForm">
    <input type="hidden" id="id" name="id">
    <div class="form-group">
        <label for="inputTitle" class="col-sm-2 control-label">商品标题</label>
        <div class="col-sm-10">
            <input type="text" style="width: 80%" class="form-control" id="inputTitle" placeholder="请输入商品标题">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
        <div class="col-sm-10">
            <input type="text" style="width: 80%" class="form-control" id="inputPrice" placeholder="请输入商品价格">
        </div>
    </div>
    <div class="form-group">
        <label for="inputDescr" class="col-sm-2 control-label">商品描述</label>
        <div class="col-sm-10">
            <textarea cols="90" rows="10" id="inputDescr"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="file" class="col-sm-2 control-label">商品图片</label>
        <div class="col-sm-10">
            <input type="file" style="width: 60%" class="form-control" id="file" onchange="uploadImg()">
            <!-- 商品上传完毕后要即时显示上传效果 -->
            <img src="" id="myimg" style="width: 100px;">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" onclick="submitEditForm()">保存</button>
        </div>
    </div>
</form>

<script>
    // 获取 URL 中的商品 ID
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');

    // 页面加载完成后获取商品信息并填充表单
    $(document).ready(function() {
        $.ajax({
            url: 'getGoodsById',
            type: 'GET',
            data: { id: id },
            dataType: 'json',
            success: function(res) {
                if (res.code === 200) {
                    const goods = res.data;
                    $('#id').val(goods.id);
                    $('#inputTitle').val(goods.title);
                    $('#inputPrice').val(goods.price);
                    $('#inputDescr').val(goods.descr);
                    $('#myimg').attr('src', goods.img);
                } else {
                    alert('获取商品信息失败: ' + res.msg);
                }
            },
            error: function(xhr, status, error) {
                alert('请求失败: ' + error);
            }
        });
    });

    // 上传图片
    function uploadImg() {
        // 这里可以实现图片上传逻辑，暂时省略
        console.log('图片上传功能待实现');
    }

    // 提交编辑表单
    function submitEditForm() {
        const id = $('#id').val();
        const title = $('#inputTitle').val();
        const price = $('#inputPrice').val();
        const descr = $('#inputDescr').val();
        const img = $('#myimg').attr('src');

        $.ajax({
            url: 'updateGoods',
            type: 'POST',
            data: {
                id: id,
                title: title,
                price: price,
                descr: descr,
                img: img
            },
            success: function(res) {
                if (res.code === 200) {
                    alert('商品信息更新成功');
                    window.location.href = 'allGoods.html';
                } else {
                    alert('商品信息更新失败: ' + res.msg);
                }
            },
            error: function(xhr, status, error) {
                alert('请求失败: ' + error);
            }
        });
    }
</script>
</body>
</html>
